<template>
    <p>这是一个组件</p>
    <p>{{ msg }}</p>
    <div v-html="spanHtml"></div>

    <p>v-if</p>
    <p v-if="isActive">isActive是true 222</p>
    <p v-else>isActive是false 1111 </p>
    <button @click="switchIsActive">点击事件</button>

    <p v-if="num ==0">num为0</p>
    <p v-else-if="num ==1">num 为1</p>
    <p v-else>num 非 0 非 1</p>
    <button @click="changeNum(0)">num 设置为0</button>
    <button @click="changeNum(1)">num 设置为1</button>
    <button @click="changeNum(2)">num 设置为2</button>

    <p v-for="(item,index) in arr">item 是{{ item }},index 是{{ index }}</p>
    <p v-for="(value,key,index) in obj">
        value 是{{ value }},key 是{{ key }},nidex 是{{ index }}
    </p>

    <h2>配置信息</h2>

    <div>
        <label>昵称：</label>
        <input type="text"  v-model="user.name">
    </div>

    <div>
        <label>性别：</label>
        <input type="radio" name="sex" v-model="user.sex" value="男">男
        <input type="radio" name="sex" v-model="user.sex" value="女">女
    </div>
    <div>
        <label>心愿单：</label>
        <input type="checkbox" name="wish" v-model="user.wish" value="iphone">iphone
        <input type="checkbox" name="wish" v-model="user.wish" value="Huawei">Huawei
        <input type="checkbox" name="wish" v-model="user.wish" value="iwatch">iwach
        <input type="checkbox" name="wish" v-model="user.wish" value="其他">其他
    </div>
 <h2>最新信息如下</h2>
    <p>昵称是：{{ user.name }}</p>
    <p>性别是：{{ user.sex }}</p>



    <p>登录</p>
    <div>
        <label>用户名：</label>
        <input type="text" placeholder="请输入您用户名" v-model="aaaa">
    </div>
    <div>
        <label>密  码：</label>
        <input type="password" placeholder="请输入您的密码" v-model="bbbb">
    </div>


</template>

<script>
export default {
    data(){
        return {
            msg: "hello world",
            spanHtml: "<span>这是一个标签</span>",
            isActive:true,
            num:0,
            arr:["吃","吃","吃"],
            obj:{
                a:'吃',
                b:'cao',
                c:'cao'
            },
            user:{
                name:'',
                sex:'男',
                wish:[],
                group:'',
                remark:''

            },
            aaaa:'',
            bbbb:''



        }
    },
    methods:{
        clickAction(){
            console.long('123');
        },
        switchIsActive(){
            this.isActive = !this.isActive
        },
        changeNum(number){
            this.num = number
        }
    }
}
</script>
